<template>
  <div class="box">
    <div id="main"></div>
    <!-- 背景圆 -->
    <div class="Back"></div>
    <div class="Back2"></div>
    <div class="center_radio"></div>
  </div>
</template>
<script>
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {},
  /* 2. Vue数据 */
  props: {
    score: {
      type: Number,
      default: 0,
    },
  },
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {};
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {},
  mounted() {
    this.getEchartData();
  },
  destroy() {},
  /* 5. Vue方法 */
  methods: {
    getEchartData() {
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
        backgroundColor: "",
        series: [
          {
            name: "温度",
            type: "gauge",
            clockwise: true,
            data: [
              {
                value: this.score,
                name: "",
              },
            ],
            radius: "100%",
            // 仪表盘半径
            startAngle: 190,
            endAngle: -11,
            min: 0,
            max: 100,
            splitNumber: 5,
            center: ["50%", "60%"],
            axisLabel: {
              // 大刻度标签。
              show: true,
              distance: 5,
              color: "#9A9A9A",
              fontSize: 16,
              //    formatter: function(param){
              //         if((param % 10) == 0) {
              //             return param;
              //         }
              //    },
              formatter: "{value}",
            },
            splitLine: {
              length: 10,
              // 分隔线长度
              lineStyle: {
                width: 0,
                color: "red",
              },
            },
            axisLine: {
              // 仪表盘轴线(轮廓线)相关配置。
              show: true,
              lineStyle: {
                // 仪表盘轴线样式。
                opacity: 16,
                width: 10,
                // 表盘宽度
                shadowBlur: 0,
                color: [
                  // 仪表盘轴线颜色
                  [
                    1,
                    this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "#3CB881",
                      },
                      {
                        offset: 0.3,
                        color: "#FCAD38",
                      },
                      {
                        offset: 1,
                        color: "#FD655E",
                      },
                    ]),
                  ],
                ],
              },
            },
            axisTick: {
              // 小刻度相关
              splitNumber: 3,
              // 小刻度个数
              show: false,
            },
            detail: {
              // 仪表盘详情数据相关
              color: "#5ab1ef",
              fontSize: 0,
              formatter: "温度：{value}℃",
              offsetCenter: [0, "40%"],
              show: false,
            },
            itemStyle: {
              // 指针样式
              color: "#FF413A",
            },
            pointer: {
              // 仪表盘指针。
              show: true,
              length: "60%",

              width: 10,
              // ========================
              // show: true,
              // // 仪表盘指针icon
              // // icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
              // icon: "path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z",
              // width: 8,
              // length: "50%", // 指针长度
              // // offsetCenter: [0, '-58%'],
              // itemStyle: {
              //   color: "#e3b260",
              //   shadowColor: "rgba(255, 0, 0)",
              //   shadowBlur: 5,
              //   shadowOffsetY: 2,
              // },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>
<style scoped lang="scss">
.box {
  position: relative;
}
.chart {
  width: 100%;
  height: 100%;
}
#main {
  width: 90%;
  margin: auto;
  height: 270px;
}
.Back {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  // background-color: #F5F5F5;
  border: 5px solid #f5f5f5;
  position: absolute;
  left: 39px;
  top: 12px;
  z-index: -1;
}
.Back2 {
  width: 300px;
  height: 300px;
  background-color: white;
  position: absolute;
  top: 188px;
  left: 40px;
  z-index: -1;
}
.center_radio {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #f5f5f5;
  position: absolute;
  top: 133px;
  left: 158px;
  z-index: -1;
}
</style>
